<html lang="en">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>添加职员</title>
  <!-- Icons-->
  <link href="../vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="../vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="../vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
  <link href="../vendors/pace-progress/css/pace.min.css" rel="stylesheet">
</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed pace-done sidebar-lg-show">
  <header class="app-header navbar">
    <button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
      <span class="navbar-toggler-icon"></span>
    </button>

    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="btn-group" role="group" aria-label="Button group">
      <span class="btn"> 欢迎回来，尊敬的管理员！</span>
      <a class="btn" href="/admin/logout">
        <i class="fa fa-share" aria-hidden="true"></i>退出</a>
    </div>


  </header>
  <div class="app-body">
    <div class="sidebar">
      <nav class="sidebar-nav ps ps--active-y">
        <ul class="nav">
          <br>
          <li class="nav-item nav-dropdown ">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-puzzle"></i> 职员管理</a>
            <ul class="nav-dropdown-items">
              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_add_member">
                  <i class="nav-icon icon-puzzle"></i>添加人员</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_manage_members">
                  <i class="nav-icon icon-puzzle"></i>管理人员</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_manage_user">
                  <i class="nav-icon icon-puzzle"></i>管理客户</a>
              </li>
            </ul>
          </li>
          <br><br>
          <li class="nav-item nav-dropdown">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-cursor"></i> 商品管理</a>
            <ul class="nav-dropdown-items">

              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_add_goods">
                  <i class="nav-icon icon-cursor"></i> 发布商品</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_manage_goods">
                  <i class="nav-icon icon-cursor"></i> 编辑商品</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_show_goods">
                  <i class="nav-icon icon-cursor"></i> 商品展示</a>
              </li>
            </ul>
          </li>
          <br><br>
          <li class="nav-item nav-dropdown">
            <a class="nav-link nav-dropdown-toggle" href="#">
              <i class="nav-icon icon-layers"></i>供应商管理</a>
            <ul class="nav-dropdown-items">

              <li class="nav-item">
                <a class="nav-link" href="/admin/admin_addeidt_provider">
                  <i class="nav-icon icon-layers"></i>管理供应商</a>
              </li>

            </ul>
          </li>
          <br>
        </ul>
        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
          <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
        </div>
        <div class="ps__rail-y" style="top: 0px; height: 445px; right: 0px;">
          <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 297px;"></div>
        </div>
      </nav>
      <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>
    <main class="main">
      <!-- Breadcrumb-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">你的位置：职员管理->添加职员</li>
      </ol>

      <div align="center" id="itemsTemplate">
        <div class="col-sm-12 col-md-10" align="center">

          <div class="card border-primary" align="center">

            <div class="card-body">
              <div class="card" id="listTable">

                <div class="card-header" align="center">
                  <h2><i class="fa fa-user-o"></i>添加职员</h2>
                </div>
                <div class="card-body" align="center">

                  <form class="needs-validation" novalidate>

                    <div class="form-group row">

                      <div class="card-body collapse show" id="collapseExample">
                        <table class="table table-responsive-sm table-bordered">

                          <tbody id="trlist" align="center">
                            <tr>
                              <td>姓名</td>
                              <td>
                                <div class="col-md-9">
                                  <input class="form-control" id="empName" type="text" name="empName"
                                    v-model="addALL.empName" placeholder="姓名"
                                    pattern="^[\u4e00-\u9fa5]{2,4}$|^[A-Za-z\s]{2,50}$" required>
                                  <div class="invalid-feedback">
                                    姓名不能为空并只能输入2-4中文或英文！
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>性别</td>
                              <td>
                                <div class="col-md-9">
                                  <select class="form-control" id="select1" name="select1" v-model="addALL.empSex">
                                    <option value=0>男</option>
                                    <option value=1>女</option>
                                  </select>
                                </div>
                              </td>
                            </tr>

                            <tr>
                              <td>职位</td>
                              <td>
                                <div class="col-md-9">
                                  <select class="form-control" id="select2" name="select2" v-model="addALL.empType">
                                    <option value=""></option>
                                    <option value=0>销售员</option>
                                    <option value=1>跟单员</option>
                                    <option value=2>财务</option>
                                  </select>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>电话</td>
                              <td>
                                <div class="col-md-9">
                                  <input class="form-control" id="empTel" type="text" name="empTel"
                                    v-model="addALL.empTel" placeholder="电话"
                                    pattern="^[1]([3-9])[0-9]{9}$"
                                    required>
                                  <div class="invalid-feedback">
                                    电话不能为空并只能输入数字！
                                  </div>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>联系地址</td>
                              <td>
                                <div class="col-md-9">
                                  <input class="form-control" id="empAddress" type="text" name="empAddress"
                                    v-model="addALL.empAddress" placeholder="地址" required>
                                  <div class="invalid-feedback">
                                    联系地址不能为空！
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                  </form>
                  <button class="btn btn-primary" type="button" v-on:click="addB()">
                    <i class="fa fa-check" aria-hidden="true"></i>提交</button>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- 保存 -->
        <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          style="display: none;" aria-hidden="true">
          <div class="modal-dialog modal-primary" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">保存</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <p>是否保存</p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">否</button>
                <button class="btn btn-danger" type="button" data-toggle="modal" v-on:click="addA()">确定</button>
              </div>
            </div>
          </div>
        </div>
        <!-- /成功-->
        <div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          style="display: none;" aria-hidden="true">
          <div class="modal-dialog modal-success" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">提示</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <p>保存成功！</p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">返回</button>
              </div>
            </div>
            <!-- /.modal-content-->
          </div>
        </div>
        <div class="modal fade" id="danger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          style="display: none;" aria-hidden="true">
          <div class="modal-dialog modal-danger" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">提示</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <p>已存在该职员</p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-danger" type="button" data-dismiss="modal">确定</button>
              </div>
            </div>
            <!-- /.modal-content-->
          </div>
        </div>
        <div class="modal fade" id="issue" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             style="display: none;" aria-hidden="true">
          <div class="modal-dialog modal-danger" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">提示</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <p>出现未知错误</p>
              </div>
              <div class="modal-footer">
                <button class="btn btn-danger" type="button" data-dismiss="modal">确定</button>
              </div>
            </div>
            <!-- /.modal-content-->
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="../vendors/jquery/js/jquery.min.js"></script>
  <script src="../vendors/popper.js/js/popper.min.js"></script>
  <script src="../vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="../vendors/pace-progress/js/pace.min.js"></script>
  <script src="../vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="../vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="../vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script>
  <script src="../vendors/mock.js/js/mock.min.js"></script>
  <script src="../vendors/vue.js/js/vue.min.js"></script>

  <script>
    var p, d, j;
    var app;
    var item;
    var checkValidity;
    $(function () {

      app = new Vue({
        el: '#itemsTemplate',
        data: {
          addALL: {
            id: 0,//主键标识
            empId: 0,
            empPwd: 0,
            empName: "",
            empSex: 0,
            empType: 0,//职位
            empTel: "",//电话
            empAddress: "",//地址
            create_time: new Date(),//记录创建日期
            updateTime: new Date(),//记录修改日期
            isLock: 0,//是否锁住
            isDel: 0//是否离职
          },
        },
        methods: {
          // 新增
          addA: function () {

            var forms = document.getElementsByClassName('needs-validation')[0];
            forms.classList.add('was-validated');
            var data = {
                  "id": 0,//主键标识
                  "empId": 0,
                  "empPwd": 0,
                  "empName": this.addALL.empName,
                  "empSex": this.addALL.empSex,
                  "empType": this.addALL.empType,//职位
                  "empTel": this.addALL.empTel,//电话
                  "empAddress": this.addALL.empAddress,//地址
                  "createTime": new Date(),//记录创建日期
                  "updateTime": new Date(),//记录修改日期
                  "isLock": 0,//是否锁住
                  "isDel": 0//是否离职
            }
            if (forms.checkValidity() === true) {
              $.ajax({
                url: "/admin/emp/save",
                type: "post",
                //将/jsON转化为字符串传递
                dataType:'json',
                contentType : "application/json",
                data: JSON.stringify(data),

                //成功后的方法
                success: function (data) {
                  if(data.resultCode === 500){
                    $('#primaryModal').modal('hide');
                    $('#danger').modal('show');
                  }else{
                    $('#primaryModal').modal('hide');
                    $('#success').modal('show');
                    window.location.href ="/admin/admin_manage_members";
                  }


                },
                error: function (xhr, status, error) {
                  $('#primaryModal').modal('hide');
                  $('#issue').modal('show');
                }
              });
              // $.post("/admin/emp/save",
              //   {
              //     id: 0,//主键标识
              //     empId: 0,
              //     empPwd: 0,
              //     empName: this.addALL.empName,
              //     empSex: this.addALL.empSex,
              //     empType: this.addALL.empType,//职位
              //     empTel: this.addALL.empTel,//电话
              //     empAddress: this.addALL.empAddress,//地址
              //     create_time: new Date(),//记录创建日期
              //     updateTime: new Date(),//记录修改日期
              //     isLock: 0,//是否锁住
              //     isDel: 0//是否离职
              //
              //   }, function (data) {
              //     if (data === true) {
              //       $('#primaryModal').modal('hide');
              //       $('#success').modal('show');
              //     } else {
              //       $('#primaryModal').modal('hide');
              //       $('#danger').modal('show');
              //     }
              //   });

            }
            $('#primaryModal').modal('hide');
            forms.classList.add('was-validated');
          },
          addB: function () {
            var forms = document.getElementsByClassName('needs-validation')[0];
            forms.classList.add('was-validated');
            if (forms.checkValidity() === true) {
              $('#primaryModal').modal('show');
            }
          }

        }

      });
      return;

    });



  </script>
</body>

</html>